
    $(document).ready(function () {
        require.config({
            paths: {
                echarts: ctx+'/resource/plugins/echarts/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',
                'echarts/chart/bar',
                'echarts/chart/pie',
            ],
            function (ec) {
                left_in_echart = ec.init(document.getElementById('left_in_echart')); //资源统计查询
                left_center_echart();

                right_bottom_echart=ec.init(document.getElementById('right_bottom_echart'));//业务资源变更统计
                right_bom_echart();

                setTimeout(function (){
                    window.onresize = function () {
                        left_in_echart.resize();
                        right_bottom_echart.resize();
                    }
                },200)
            }

        );

        resource();
        resource_room();
    });
/** 首页资源数据加载*/
function resource(){
    url=ctx+"/resource/resourceList";
    $.ajax({
        url:url,
        type:"post",
        success:function(data){

            data =JSON.parse(data);

            //资源概览
            var overview=data.overview;
            resource_overview(overview);

            //资源消费概览
            var consum=data.consum;
            resource_consum(consum);

            //虚拟资源
            var virtualResource=data.virtualResource;
            virtual_resource(virtualResource);

        },error:function(textStatus){
            console.log("error:"+textStatus.status);
        }
    });
}
/** end 首页资源数据加载*/

/** 资源概览*/
function resource_overview(overview){

    $("#hid").html(overview[0].HOST+"台");
    $("#nid").html(overview[0].NETWORK+"台");
    $("#sid").html(overview[0].STORAGE+"T");
    $("#aid").html(overview[0].SECURITY+"台");
    $("#tid").html(overview[0].TERMINAL+"台");

}

/** 资源消费概览*/
function resource_consum(consum){
    var tableStr="";
    for(var i=0;i<consum.length;i++){

        var percent=parseInt(parseInt(consum[i].COUNT)/ parseInt(consum[i].TOTAL_COUNT)*100);
        var progress=percent+"%";
        tableStr+="<tr><td> <span class='badge badge-info'>"+(i+1)+"</span></td>";
        tableStr+="<td>"+consum[i].DICT_NAME+"</td>";
        if(percent<20){
            tableStr+="<td><div class='progress progress-striped active'>";
            tableStr+="<div class='progress-bar progress-bar-success' role='progressbar'aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: "+progress+"'>"+consum[i].COUNT+"</div></div></td>";
        }else if(percent>20||percent<70){
            tableStr+="<td><div class='progress progress-striped active'>";
            tableStr+="<div class='progress-bar progress-bar-striped' role='progressbar'aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: "+progress+"'>"+consum[i].COUNT+"</div></div></td>";
        }else{

            tableStr+="<td><div class='progress progress-striped active'>"
            tableStr+="<div class='progress-bar progress-bar-danger' role='progressbar'aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: "+progress+"'>"+consum[i].COUNT+"</div></div></td>";
        }
    }
    $("#consum").append(tableStr);
}


/** 资源机房视图*/
function resource_room() {
    url=ctx+"/resource/resourceRoomList";
    $.ajax({
        url:url,
        type:"post",
        success:function(data){

            var computerRoom =JSON.parse(data);

            var divStr = "<div>";
            var len = computerRoom.length > 12 ? 12 : computerRoom.length;
            for (var i = 0; i < len; i++) {
                if(computerRoom[i].PLACE_NAME.length>5){

                    var PLACE_NAME=computerRoom[i].PLACE_NAME.substring(0,5)+"...";
                }else{

                    PLACE_NAME=computerRoom[i].PLACE_NAME;
                }
                var a = parseInt(i + 1);
                if ((a + 2) % 3 == 0) {
                    divStr += "<div class='third circle' style='width: 30%;top: 10%;float: left;' id='circle" + a + "'><strong></strong>";
                    divStr += "<span class='btn btn-info btn-sm popover-info' style='left: 23.3%;width: 52%;' data-rel='popover' data-toggle='tooltip' data-placement='bottom' title='"+computerRoom[i].PLACE_NAME+"'>" + computerRoom[i].PLACE_NAME+ "</span></div>";
                } else if ((a + 1) % 3 == 0) {
                    divStr += "<div class='third circle' style='width: 33%;top: 10%;float: left;' id='circle" + a  + "'><strong></strong>";
                    divStr += "<span class='btn btn-info btn-sm popover-info' style='left: 23.3%;width: 52%;' data-toggle='tooltip' data-placement='bottom' title='"+computerRoom[i].PLACE_NAME+"'>" + computerRoom[i].PLACE_NAME+ "</span></div>";
                } else {
                    divStr += "<div class='third circle' style='width: 29%;top: 10%;float: left;' id='circle" + a + "'><strong></strong>";
                    divStr += "<span class='btn btn-info btn-sm popover-info' style='left: 23.3%;width: 52%;' data-rel='popover' data-toggle='tooltip' data-placement='bottom' title='"+computerRoom[i].PLACE_NAME+"'>" +computerRoom[i].PLACE_NAME + "</span></div>";
                }
                if(a%3==0){
                    if(a!=len){
                        divStr+="</div><hr>";
                    }
                    $("#computerRoom").append(divStr);
                    divStr = "<div>";
                }else if(a==len){
                    divStr += "</div>";
                    $("#computerRoom").append(divStr);

                }
            }
            for (var i = 0; i <len; i++) {
                var percent =computerRoom[i].P;
                $("#circle" + (i+1)).circleProgress({
                    value: percent,
                    size: 100,
                    thickness: 12,
                    lineCap: "round",
                    emptyFill: "#fff",
                    fill: {
                        gradient: ["red", "#39a6f9"]
                    }
                }).on('circle-animation-progress', function (event, progress, stepValue) {
                    $(this).find('strong').html(parseInt(100 * stepValue) + '<i>%</i>');
                });
            }
            $("[data-toggle='tooltip']").tooltip();
        },error:function(textStatus){
            console.log("error:"+textStatus.status);
        }
    });

}

/** 资源生命周期*/
function   left_center_echart(){

    url=ctx+"/resource/resourceLifecycleList";
    $.ajax({
        url:url,
        type:"post",
        success:function(data){

            var resourceLifecycle =JSON.parse(data);
            option = {
                tooltip : {
                    trigger: 'axis',
                    formatter : function (params) {
                        return params[0].name+'<br/>'
                            +'在用数:'+params[0].value + '<br/>'
                            + '剩余数:'+params[1].value + '<br/>'
                            + '总数量:'+(params[1].value+params[0].value) + '<br/>'
                            + '使用率:'+parseFloat((params[2].value*100).toPrecision(12)) + '%';
                    }
                },
                color:['#ffa800','#39a6f9','#06ee5e'],
                title:{
                    text:'资源生命周期统计',
                    x:'center',
                    textStyle : {
                        color: '#fff'
                    }
                },
                toolbox: {
                    show : false,
                },
                grid: {
                    x:'10%',
                    y:'20%',
                    x2:'10%',
                    y2:'20%',
                    borderWidth: 0,
                },
                calculable : true,
                legend: {
                    data:['在用数','剩余数','使用率'],
                    x: 'center',
                    y: 'bottom',
                    textStyle : {
                        color: '#fff'
                    }
                },
                xAxis : [
                    {
                        type : 'category',
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        data: []
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine: {
                            show: false,
                        },
                        name : '在用/剩余(个)',
                        axisLabel : {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },

                    {
                        type : 'value',
                        splitLine: {
                            show: false,
                        },
                        name : '使用率(%)',
                        axisLabel : {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                series : [


                    {
                        name: '在用数',
                        type: 'bar',
                        stack: '总量',
                        barWidth : 45,
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: []
                    },
                    {
                        name: '剩余数',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: []
                    },

                    {
                        name:'使用率',
                        type:'line',
                        yAxisIndex: 1,
                        data:[]
                    }
                ]
            };
            xdata=[];
            y1data=[];
            y2data=[];
            y3data=[];
            for(var i=0;i<resourceLifecycle.length;i++){

                var ratio=(parseInt(resourceLifecycle[i].ZY_COUNT)/parseInt(resourceLifecycle[i].ZS_COUNT)).toFixed(2);
                xdata.push(resourceLifecycle[i].DICT_NAME);
                y1data.push(resourceLifecycle[i].ZY_COUNT);
                y2data.push(resourceLifecycle[i].SY_COUNT);
                y3data.push(ratio);
            }
            option.xAxis[0].data = xdata;
            option.series[0].data = y2data;
            option.series[1].data = y1data;
            option.series[2].data = y3data;
            left_in_echart.setOption(option);


        },error:function(textStatus){
            console.log("error:"+textStatus.status);
        }
    });
}

/** 业务资源变更统计*/
function   right_bom_echart(){

    url=ctx+"/resource/businessChangeList";
    $.ajax({
        url:url,
        type:"post",
        success:function(data){

            var businessChange =JSON.parse(data);
            var count="";
            option = {
                tooltip : {
                    trigger: 'axis',
                    formatter : function (params) {
                        return params[0].name+'<br/>'
                            + '在运数量:'+params[2].value + '<br/>'
                            + '变更数量:'+params[1].value + '<br/>'
                            + '总数量:'+params[0].value + '<br/>'
                            + '变更率:'+ parseFloat((params[3].value*100).toPrecision(12)) + '%';

                    }
                },
                color:['#ffa800','#39a6f9','#33ffff','#06ee5e'],
                title:{
                    text:'业务资源变更统计',
                    x:'center',
                    textStyle : {
                        color: '#fff'
                    }
                },
                toolbox: {
                    show : false,
                },
                grid: {
                    x:'10%',
                    y:'20%',
                    x2:'10%',
                    y2:'20%',
                    borderWidth: 0,
                },
                calculable : true,
                legend: {
                    data:['在运数量','变更数量','总数量','变更率'],
                    x: 'center',
                    y: 'bottom',
                    textStyle : {
                        color: '#fff'
                    }
                },
                xAxis : [
                    {
                        type : 'category',
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            interval:0,
                            rotate:-30,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        data: []
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine: {
                            show: false,
                        },
                        name : '在运/变更(个)',
                        axisLabel : {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },

                    {
                        type : 'value',
                        splitLine: {
                            show: false,
                        },
                        name : '变更率(%)',
                        axisLabel : {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                series : [

                    {
                        name: '在运数量',
                        type: 'bar',
                        stack: '总量',
                        barWidth : 45,
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: []
                    },
                    {
                        name: '变更数量',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: []
                    },
                    {
                        name: '总数量',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: []
                    },
                    {
                        name:'变更率',
                        type:'line',
                        yAxisIndex: 1,
                        data:[]
                    }
                ]
            };

            xdatas=[];
            ydatas1=[];
            ydatas2=[];
            ydatas3=[];
            ydatas4=[];
            for(var i=0;i<businessChange.length;i++){
                count=businessChange[i].ZS_COUNT;
                var percent=(parseInt(businessChange[i].BG_COUNT)/(parseInt(count))).toFixed(2);

                if(percent=="NaN"){

                    percent=0;
                }
                xdatas.push(businessChange[i].SYSTEM);
                ydatas1.push(businessChange[i].DY_COUNT);
                ydatas2.push(businessChange[i].BG_COUNT);
                ydatas3.push(businessChange[i].ZS_COUNT);
                ydatas4.push(percent);
            }
            option.xAxis[0].data = xdatas;
            option.series[0].data = ydatas1;
            option.series[1].data = ydatas2;
            option.series[2].data = ydatas3;
            option.series[3].data = ydatas4;
            right_bottom_echart.setOption(option);


        },error:function(textStatus){
            console.log("error:"+textStatus.status);
        }
    });
}
/** 虚拟资源*/
function virtual_resource(virtualResource){

    $("#pc").html(virtualResource[0].PC_COUNT+"台");
    $("#colony").html(virtualResource[0].JQ_COUNT+"个");
    $("#memory").html(virtualResource[0].DISK+"T");
    $("#cpu").html(virtualResource[0].CPU+"核");
    $("#disk").html(virtualResource[0].MEMORY+"G");
}
